<template>
	<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view class="container position-relative">
		<view style="margin-bottom: 130rpx">
			<view class="section-1" v-if="store.name != undefined">
				<template>
					<list-cell class="location">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="store-name flex-fill">{{ store.name }}</view>
							<!-- <image src="/static/images/navigator-1.png" class="arrow"></image> -->
						</view>
					</list-cell>
				</template>
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column">
					<list-cell last v-for="(item, index) in cart" :key="index">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view
									class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<image style="width: 80rpx; height: 80rpx" mode="aspectFill" :src="item.image">
									</image>
								</view>
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-lg">{{
                    item.name
                  }}</view>
								</view>
								<view
									class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-lg">
									<view>x{{ item.number }}</view>
									<view>￥{{ item.price }}</view>
								</view>
							</view>
							<view class="text-truncate font-size-base text-color-assist">{{
                item.valueStr
              }}</view>
						</view>
					</list-cell>
				</view>

				<list-cell last>
					<view class="flex-fill d-flex justify-content-end align-items-center">
						<view>
							总计￥{{ total }}
							<text v-if="orderType == 'takeout'">,配送费￥{{ store.deliveryPrice }}</text>
							<text v-if="coupon.value">,￥-{{ coupon.value }}</text>
							,实付
						</view>
						<view class="font-size-extra-lg font-weight-bold">￥{{ amount }}</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
				style="padding: 20rpx 0">
			</view>

			<!-- 备注 end -->
		</view>
		<!-- 付款栏 begin -->
		<view style="z-index: 1"
			class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx">合计：</view>
			<view class="font-size-lg flex-fill">￥{{ amount }}</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
				style="padding: 0 60rpx" @tap="debounce(submit, 500)">打单</view>
		</view>
		<uv-toast ref="uToast"></uv-toast>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		nextTick
	} from "vue";
	import {
		useMainStore
	} from "@/store/store";
	import {
		storeToRefs
	} from "pinia";
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onHide
	} from "@dcloudio/uni-app";
	import {
		formatDateTime,
		isWeixin
	} from "@/utils/util";
	import debounce from "@/uni_modules/uv-ui-tools/libs/function/debounce";

	import {
		orderSubmit,
		payUnify,
		getWechatConfig,
		orderPrintSubmit,
	} from "@/api/order";
	import {
		couponCount
	} from "@/api/coupon";
	// #ifdef H5
	import * as jweixin from "weixin-js-sdk";
	// #endif
	const main = useMainStore();
	const {
		orderType,
		address,
		store,
		location,
		isLogin,
		member,
		mycoupon
	} =
	storeToRefs(main);
	const active = ref(false);
	const title = ref("打单");
	const jsStr = ref("");
	const cart = ref([]);
	const form = ref({
		remark: "",
	});
	const ensureAddressModalVisible = ref(false);
	const takeoutTIme = ref(false); // 外卖取餐时间picker
	const paramsTime = ref({
		year: false,
		month: false,
		day: false,
		hour: true,
		minute: true,
		second: false,
	});
	const defaultTime = ref("00:00");
	const takeinTIme = ref(false); // 到店自取时间selector
	const takeinRange = ref([{
			name: "立即用餐",
			value: 0,
		},
		{
			name: "10分钟后",
			value: 10,
		},
		{
			name: "20分钟后",
			value: 20,
		},
		{
			name: "30分钟后",
			value: 30,
		},
		{
			name: "40分钟后",
			value: 40,
		},
		{
			name: "50分钟后",
			value: 50,
		},
	]);
	const defaultSelector = ref([0]);
	const payType = ref("weixin"); // 付款方式
	const coupons = ref(0); // 可用优惠券数量
	const coupon = ref(main.mycoupon); // 选中的
	const subscribeMss = ref({
		takein: "",
		takeout: "",
		takein_made: "",
		takeout_made: "",
	}); // 微信订阅信息
	const uToast = ref();

	const total = computed(() => {
		return cart.value.reduce((acc, cur) => acc + cur.number * cur.price, 0);
	});
	const amount = computed(() => {
		let amount = 0;
		if (cart.value && cart.value instanceof Array) {
			amount = cart.value.reduce((acc, cur) => acc + cur.number * cur.price, 0);
		}
		// 加配送费
		if (store.value.distance > 0 && orderType.value == "takeout") {
			amount += parseFloat(store.value.deliveryPrice);
		}

		// 减去优惠券
		if (main.mycoupon.hasOwnProperty("id")) {
			amount -= parseFloat(main.mycoupon.value);
		}
		return amount.toFixed(2);
	});

	onShow(() => {
		coupon.value = main.mycoupon;
		let date = new Date(new Date().getTime() + 3600000); // 一个小时后
		let hour = date.getHours();
		let minute = date.getMinutes();
		if (hour < 10) {
			hour = "0" + hour;
		}
		if (minute < 10) {
			minute = "0" + minute;
		}
		defaultTime.value = hour + ":" + minute;

		console.log("member:", member.value);
		console.log("orderType =>", orderType.value);

		if (orderType.value == "takeout") {
			active.value = true;
		} else {
			active.value = false;
		}

		// getCoupons();

		let paytype = uni.getStorageSync("paytype");
		payType.value = paytype ? paytype : "weixin";
	});
	onHide(() => {
		subscribeMss.value = [];
		coupons.value = 0;
	});
	onLoad((option) => {
		cart.value = uni.getStorageSync("cart");
		if (option.remark) {
			form.value.remark = option.remark;
		}
	});

	const getSubscribeMss = async () => {
		let data = [];
		if (data) {
			subscribeMss.value = data;
		}
	};
	// 更改支付方式
	const setPayType = (paytype) => {
		payType.value = "weixin";
		payType.value = paytype;
		uni.setStorage({
			key: "paytype",
			data: paytype,
		});
	};
	const getCoupons = async () => {
		//0=通用,1=自取,2=外卖
		let type = orderType.value == "takein" ? 1 : 2;
		let data = await couponCount({
			shop_id: store.value.id ? store.value.id : 0,
			type: type,
		});
		if (data) {
			coupons.value = data;
		}
	};
	// 选择时间
	const choiceTime = (value) => {
		let hour = value.hour;
		let minute = value.minute;

		let date = new Date(new Date().getTime() + 3600000); // 一个小时后
		let nowhour = date.getHours();
		let nowminute = date.getMinutes();

		if (
			(hour * 60 * 60 + minute * 60) * 1000 - 3600000 <
			(nowhour * 60 * 60 + nowminute * 60) * 1000
		) {
			uToast.value.show({
				message: "请至少选择一个小时之后",
				type: "error",
			});
			return;
		}

		if (hour < 10) {
			hour = "0" + hour;
		}
		if (minute < 10) {
			minute = "0" + minute;
		}
		defaultTime, (value = hour + ":" + minute);
		takeoutTIme.value = false;
	};
	const cancelTime = (value) => {
		takeoutTIme.value = false;
	};
	// 到店自取-取消选择取餐时间
	const takeinCancelTime = (value) => {
		takeinTIme.value = false;
	};
	// 到店自取-选择取餐时间
	const takeinConfirmTime = (value) => {
		defaultSelector.value = value;
	};
	// 是否外卖开关
	const takout = (value) => {
		let type = "takeout";
		if (value == false) {
			type = "takein";
		}
		main.SET_ORDER_TYPE(type);

		// 如果存在优惠券看看需不需要清除
		if (coupon.value.hasOwnProperty("type")) {
			//0=通用,1=自取,2=外卖
			if (coupon.value.type != 0) {
				if (coupon.value.type == 1 && orderType.value == "takeout") {
					coupon.value = {};
				}
				if (coupon.value.type == 2 && orderType.value == "takeint") {
					coupon.value = {};
				}
			}
		}
		subscribeMss.value = [];
		coupons.value = 0;
		// getCoupons();
	};
	const goToRemark = () => {
		uni.navigateTo({
			url: "/pages/components/pages/remark/remark?remark=" + form.value.remark,
		});
	};
	const chooseAddress = () => {
		uni.navigateTo({
			url: "/pages/components/pages/address/address?is_choose=true&scene=pay",
		});
	};
	const goToPackages = () => {
		let newamount = amount.value;
		let coupon_id = coupon.value.id ? coupon.value.id : 0;
		let type = orderType.value == "takein" ? 1 : 2;
		let shop_id = store.value.id;
		uni.navigateTo({
			url: "/pages/components/pages/packages/index?amount=" +
				newamount +
				"&coupon_id=" +
				coupon_id +
				"&shop_id=" +
				shop_id +
				"&type=" +
				type,
		});
	};
	const goToShop = () => {
		uni.navigateTo({
			url: `/pages/components/pages/shop/shop`,
		});
	};
	const submit = async () => {
		if (orderType.value == "counter_ordering") {
			// 下单打印单
			let that = this;
			uni.showLoading({
				title: "加载中",
			});

			let data = {
				orderType: orderType.value, // 购买类型:takein=自取,takeout=外卖
				addressId: 0, // 外卖配送地址
				shopId: store.value.id, // 店铺id
				mobile: member.value.mobile, // 联系电话
				gettime: takeinRange.value[defaultSelector.value[0]].value, // 取餐时间
				payType: payType.value, // 支付类型
				remark: form.value.remark, // 备注
				productId: [],
				spec: [],
				number: [],
				couponId: 0, // 优惠券id
			};

			cart.value.forEach((item, index) => {
				data.productId.push(item.id);
				if (item.valueStr) {
					data.spec.push(item.valueStr?.replace(/,/g, "|"));
				}
				//data.spec.push(item.valueStr);
				data.number.push(item.number);
			});

			//console.log(data);
			try {
				let order = await orderPrintSubmit(data);
				if (!order) {
					uni.hideLoading();
					uni.setStorageSync('cart', []);
					uni.navigateTo({
						url: "/pages/index/index"
					})
				}
			} catch (error) {
				console.log(error);
				uni.hideLoading();
			}
			// uni.hideLoading();
		}
	};

	const balancePay = async (order) => {
		let from = "routine";
		// #ifdef H5
		from = "h5";
		// #endif
		let pay = await payUnify({
			uni: order.orderId,
			from: from,
			paytype: "yue",
		});

		uni.hideLoading();
		if (!pay) {
			return;
		}

		member.value.money -= amount.value;
		main.SET_MEMBER(member.value);

		uni.removeStorageSync("cart");
		uni.switchTab({
			url: "/pages/order/order",
			fail(res) {
				console.log(res);
			},
		});
	};
	const weixinPay = async (order) => {
		let from = "routine";
		// #ifdef H5
		from = "h5";
		if (isWeixin()) {
			from = "wechat";
		}

		// #endif
		//let that = this;
		let data = await payUnify({
			uni: order.orderId,
			from: from,
			paytype: "weixin",
		});
		console.log("weixin pay result:", data);
		if (!data) {
			uni.hideLoading();
			return;
		}
		if (data.trade_type == "MWEB") {
			// #ifdef H5
			// 微信外的H5
			console.log("data:", data);
			location.href = data.data;
			// #endif
			console.log("data1:", data);
		} else if (data.trade_type == "JSAPI") {
			console.log("param:", data);

			// #ifdef MP-WEIXIN
			uni.requestPayment({
				provider: "wxpay",
				timeStamp: data.data.timeStamp,
				nonceStr: data.data.nonceStr,
				package: data.data.package,
				signType: "MD5",
				paySign: data.data.paySign,
				success: function(res) {
					uni.removeStorageSync("cart");
					uni.switchTab({
						url: "/pages/order/order",
					});
				},
				fail: function(err) {
					console.log("fail:" + JSON.stringify(err));
				},
			});
			// #endif
		} else if (data.trade_type == "W-JSAPI") {
			//公众号支付
		} else if (data.trade_type == "APP") {}
	};
	const aliPay = async (order) => {
		// #ifdef H5
		//let that = this;
		if (isWeixin()) {
			uni.showToast({
				title: "请普通浏览器打开进行支付宝支付~",
				icon: "none",
			});
			return;
		}
		let data = await payUnify({
			uni: order.orderId,
			from: "h5",
			paytype: "alipay",
		});

		console.log("data:", data.data);
		// 支付宝支付，这里只要提交表单
		let form = data.data;
		const div = document.createElement("formdiv");
		div.innerHTML = form;
		document.body.appendChild(div);
		//document.forms[0].setAttribute('target', ' self');
		document.forms[0].submit();
		//div.remove();

		// #endif
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.arrow {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
	}

	.location {
		.store-name {
			font-size: $font-size-lg;
		}

		.iconfont {
			font-size: 50rpx;
			line-height: 100%;
			color: $color-primary;
		}
	}

	.section-1 {
		margin-bottom: 30rpx;

		.contact {
			.contact-tip {
				margin-left: 10rpx;
				border: 2rpx solid $color-primary;
				padding: 6rpx 10rpx;
				color: $color-primary;
			}
		}
	}

	.section-2 {
		.name-and-props {
			width: 65%;
		}
	}

	.payment {
		margin-bottom: 30rpx;

		.disabled {
			color: $text-color-grey;
		}

		.payment-icon {
			font-size: 44rpx;
			margin-right: 10rpx;
		}

		.checkbox {
			font-size: 36rpx;
			margin-left: 10rpx;
		}

		.checked {
			color: $color-primary;
		}
	}

	.pay-box {
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.1);
		height: 100rpx;
	}

	.modal-content {
		.change-address-btn {
			line-height: 2;
			padding: 0 1em;
		}

		.pay_btn {
			width: 100%;
			border-radius: 50rem !important;
			line-height: 3;
		}
	}

	.choice {
		background-color: $bg-color-grey;
		border-radius: 38rpx;
		display: flex;
		align-items: center;
		font-size: $font-size-sm;
		padding: 0 38rpx;
		color: $text-color-assist;

		.dinein,
		.takeout {
			width: 50%;
			position: relative;
			display: flex;
			align-items: center;

			&.active {
				padding: 14rpx 38rpx;
				color: #ffffff;
				background-color: $color-primary;
				border-radius: 38rpx;
			}
		}

		.takeout {
			margin-left: 20rpx;
			height: 100%;
			flex: 1;
			padding: 14rpx 0;
		}

		.dinein.active {
			//margin-left: -38rpx;
		}

		.takeout.active {
			//margin-right: -38rpx;
		}
	}
</style>